<template>
  <uni-number-box v-model="val" :min="min" :max="max" :width="40" />
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  value: {
    type: [Number, String],
    default: 0
  },
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  integer: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['change',"update:value"]);

const val = ref(props.integer ? Math.round(props.value) : props.value);

watch(val, (newVal) => {
  emit('change', newVal);
  emit('update:value', newVal);
});

watch(() => props.value, (newVal) => {
  val.value = props.integer ? Math.round(newVal) : newVal;
});
</script>
<style lang="scss" scoped>
	.uni-numbox{
		:deep(.uni-numbox__value){
			border: none;
		}
	}
</style>